/**
 * 工厂页入库达成率弹框组件
 */
<script setup>
import { ref, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useWarehousingStore } from '@/stores/factory'
import http from '@/axios/http'

const route = useRoute()
const factory = ref(route.query.factory)

const warehousingStore = useWarehousingStore()

const selector = ref('详情')

const year = ref('')

const year1 = ref('')
const month1 = ref('')
const year2 = ref('')
const month2 = ref('')

const factoryList = ref([])
const yearList = ref([])
const monthList = ref([])

const tableData = ref([])
const compareData = ref([])

watch(year, () => {
  getWarehousingDetail()
})

watch([year1, month1, year2, month2], () => {
  getWarehousingCompare()
})

function getWarehousingOther() {
  http.post("/factory/getWarehousingOther", {
    factory: factory.value
  }).then(res => {
    factoryList.value = res.data.factoryList
    yearList.value = res.data.yearList
    monthList.value = res.data.monthList
  }).catch(err => {
    console.log(err)
  })
}

function getWarehousingDetail() {
  http.post("/factory/getWarehousingDetail", {
    factory: factory.value,
    year: year.value,
  }).then(res => {
    tableData.value = res.data
  }).catch(err => {
    console.log(err)
  })
}

function getWarehousingCompare() {
  http.post("/factory/getWarehousingCompare", {
    factory: factory.value,
    year1: year1.value,
    month1: month1.value,
    year2: year2.value,
    month2: month2.value
  }).then(res => {
    compareData.value = res.data
  }).catch(err => {
    console.log(err)
  })
}

function beforeOpen() {
  let date = new Date()
  year.value = date.getFullYear() + ""
  year1.value = date.getFullYear() + ""
  month1.value = (date.getMonth() < 9 ? ("0" + (date.getMonth() + 1)) : date.getMonth() + 1) + ""
  year2.value = date.getFullYear() - 1 + ""
  month2.value = (date.getMonth() < 9 ? ("0" + (date.getMonth() + 1)) : date.getMonth() + 1) + ""

  getWarehousingDetail()
  getWarehousingCompare()
}

function afterClose() {
  selector.value = '详情'
  tableData.value = []
  compareData.value = []
}

onMounted(() => {
  getWarehousingOther()
})
</script>

<template>
  <div id="factory-warehousing-popup">
    <el-dialog
      v-model="warehousingStore.isShow"
      :title="'标准秒值' + (factory ? '（' + factory + '）' : '')"
      top="5vh"
      width="80vw"
      center
      @open="beforeOpen"
      @closed="afterClose"
    >
      <div class="warehousing-selector">
        <div class="warehousing-selector-item" style="margin-left: 0;">
          <el-radio-group
            v-model="selector"
            size="large"
          >
            <el-radio-button label="详情"/>
            <el-radio-button label="对比"/>
          </el-radio-group>
        </div>

        <div v-show="selector === '详情'" class="warehousing-selector-item" style="margin-left: 4%;">
          <el-select
            v-model="year"
            size="large"
            filterable
            :teleported="false"
            placeholder="年份"
            no-data-text="暂无数据"
            no-match-text="暂无该年份"
            style="display: inline-block; width: 100px;"
          >
            <div style="max-height: 130px;">
              <el-option
                v-for="item in yearList"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </div>
          </el-select>
        </div>

        <div v-show="selector === '对比'" class="warehousing-selector-item" style="margin-left: 4%;">
          <el-select
            v-model="year1"
            size="large"
            filterable
            :teleported="false"
            placeholder="年份"
            no-data-text="暂无数据"
            no-match-text="暂无该年份"
            style="display: inline-block; width: 100px;"
          >
            <div style="max-height: 130px;">
              <el-option
                v-for="item in yearList"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </div>
          </el-select>
        </div>

        <div v-show="selector === '对比'" class="warehousing-selector-item">
          <el-select
            v-model="month1"
            size="large"
            filterable
            :teleported="false"
            placeholder="月份"
            no-data-text="暂无数据"
            no-match-text="暂无该月份"
            style="display: inline-block; width: 100px;"
          >
            <div style="max-height: 130px;">
              <el-option
                v-for="item in monthList"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </div>
          </el-select>
        </div>

        <div v-show="selector === '对比'" class="warehousing-selector-item" style="margin-left: 4%;">
          <el-select
            v-model="year2"
            size="large"
            filterable
            :teleported="false"
            placeholder="年份"
            no-data-text="暂无数据"
            no-match-text="暂无该年份"
            style="display: inline-block; width: 100px;"
          >
            <div style="max-height: 130px;">
              <el-option
                v-for="item in yearList"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </div>
          </el-select>
        </div>

        <div v-show="selector === '对比'" class="warehousing-selector-item">
          <el-select
            v-model="month2"
            size="large"
            filterable
            :teleported="false"
            placeholder="月份"
            no-data-text="暂无数据"
            no-match-text="暂无该月份"
            style="display: inline-block; width: 100px;"
          >
            <div style="max-height: 130px;">
              <el-option
                v-for="item in monthList"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </div>
          </el-select>
        </div>
      </div>

      <el-table
        :data="tableData"
        v-show="selector === '详情'"
        empty-text="暂无数据"
        size="large"
        maxHeight="72vh"
        border
      >
        <el-table-column label="月份" header-align="center" align="center" fixed>
          <template #default="scope">
            {{ scope.row.month !== null ? scope.row.month : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="入库数量" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.in_qty !== null ? scope.row.in_qty.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="加工1标准秒值" width="70" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.ad1_std_time1 !== null ? scope.row.ad1_std_time1.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="加工1实际秒值" width="70" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.ad1_std_time2 !== null ? scope.row.ad1_std_time2.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="加工1达成率" width="60" header-align="center" align="center">
          <template #default="scope">
            <span style="color: deepskyblue;">{{ scope.row.ad1_rate !== null ? scope.row.ad1_rate + '%' : '-' }}</span>
          </template>
        </el-table-column>

        <el-table-column label="冲机标准秒值" width="65" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.cut_std_time1 !== null ? scope.row.cut_std_time1.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="冲机实际秒值" width="65" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.cut_std_time2 !== null ? scope.row.cut_std_time2.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="冲机达成率" width="60" header-align="center" align="center">
          <template #default="scope">
            <span style="color: deepskyblue;">{{ scope.row.cut_rate !== null ? scope.row.cut_rate + '%' : '-' }}</span>
          </template>
        </el-table-column>

        <el-table-column label="面部标准秒值" width="65" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.upp_std_time1 !== null ? scope.row.upp_std_time1.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="面部实际秒值" width="65" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.upp_std_time2 !== null ? scope.row.upp_std_time2.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="面部达成率" width="60" header-align="center" align="center">
          <template #default="scope">
            <span style="color: deepskyblue;">{{ scope.row.upp_rate !== null ? scope.row.upp_rate + '%' : '-' }}</span>
          </template>
        </el-table-column>

        <el-table-column label="半成品标准秒值" width="75" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.sol_std_time1 !== null ? scope.row.sol_std_time1.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="半成品实际秒值" width="75" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.sol_std_time2 !== null ? scope.row.sol_std_time2.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="半成品达成率" width="65" header-align="center" align="center">
          <template #default="scope">
            <span style="color: deepskyblue;">{{ scope.row.sol_rate !== null ? scope.row.sol_rate + '%' : '-' }}</span>
          </template>
        </el-table-column>

        <el-table-column label="成型标准秒值" width="65" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.las_std_time1 !== null ? scope.row.las_std_time1.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="成型实际秒值" width="65" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.las_std_time2 !== null ? scope.row.las_std_time2.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="成型达成率" width="60" header-align="center" align="center">
          <template #default="scope">
            <span style="color: deepskyblue;">{{ scope.row.las_rate !== null ? scope.row.las_rate + '%' : '-' }}</span>
          </template>
        </el-table-column>

        <el-table-column label="合计标准秒值" width="65" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.tot_std_time1 !== null ? scope.row.tot_std_time1.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="合计实际秒值" width="65" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.tot_std_time2 !== null ? scope.row.tot_std_time2.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="合计达成率" width="60" header-align="center" align="center">
          <template #default="scope">
            <span style="color: deepskyblue;">{{ scope.row.tot_rate !== null ? scope.row.tot_rate + '%' : '-' }}</span>
          </template>
        </el-table-column>
      </el-table>

      <el-table
        :data="compareData"
        v-show="selector === '对比'"
        empty-text="暂无数据"
        size="large"
        maxHeight="72vh"
        border
      >
        <el-table-column label="年月" header-align="center" align="center" fixed>
          <template #default="scope">
            {{ scope.row.year + "-" +  scope.row.month }}
          </template>
        </el-table-column>

        <el-table-column label="入库数量" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.in_qty !== null ? scope.row.in_qty.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="加工1标准秒值" width="70" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.ad1_std_time1 !== null ? scope.row.ad1_std_time1.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="加工1实际秒值" width="70" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.ad1_std_time2 !== null ? scope.row.ad1_std_time2.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="加工1达成率" width="60" header-align="center" align="center">
          <template #default="scope">
            <span style="color: deepskyblue;">{{ scope.row.ad1_rate !== null ? scope.row.ad1_rate + '%' : '-' }}</span>
          </template>
        </el-table-column>

        <el-table-column label="冲机标准秒值" width="65" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.cut_std_time1 !== null ? scope.row.cut_std_time1.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="冲机实际秒值" width="65" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.cut_std_time2 !== null ? scope.row.cut_std_time2.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="冲机达成率" width="60" header-align="center" align="center">
          <template #default="scope">
            <span style="color: deepskyblue;">{{ scope.row.cut_rate !== null ? scope.row.cut_rate + '%' : '-' }}</span>
          </template>
        </el-table-column>

        <el-table-column label="面部标准秒值" width="65" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.upp_std_time1 !== null ? scope.row.upp_std_time1.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="面部实际秒值" width="65" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.upp_std_time2 !== null ? scope.row.upp_std_time2.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="面部达成率" width="60" header-align="center" align="center">
          <template #default="scope">
            <span style="color: deepskyblue;">{{ scope.row.upp_rate !== null ? scope.row.upp_rate + '%' : '-' }}</span>
          </template>
        </el-table-column>

        <el-table-column label="半成品标准秒值" width="75" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.sol_std_time1 !== null ? scope.row.sol_std_time1.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="半成品实际秒值" width="75" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.sol_std_time2 !== null ? scope.row.sol_std_time2.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="半成品达成率" width="65" header-align="center" align="center">
          <template #default="scope">
            <span style="color: deepskyblue;">{{ scope.row.sol_rate !== null ? scope.row.sol_rate + '%' : '-' }}</span>
          </template>
        </el-table-column>

        <el-table-column label="成型标准秒值" width="65" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.las_std_time1 !== null ? scope.row.las_std_time1.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="成型实际秒值" width="65" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.las_std_time2 !== null ? scope.row.las_std_time2.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="成型达成率" width="60" header-align="center" align="center">
          <template #default="scope">
            <span style="color: deepskyblue;">{{ scope.row.las_rate !== null ? scope.row.las_rate + '%' : '-' }}</span>
          </template>
        </el-table-column>

        <el-table-column label="合计标准秒值" width="65" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.tot_std_time1 !== null ? scope.row.tot_std_time1.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="合计实际秒值" width="65" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.tot_std_time2 !== null ? scope.row.tot_std_time2.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="合计达成率" width="60" header-align="center" align="center">
          <template #default="scope">
            <span style="color: deepskyblue;">{{ scope.row.tot_rate !== null ? scope.row.tot_rate + '%' : '-' }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
#factory-warehousing-popup {
  --el-color-primary: green;
  --el-bg-color: black;
  --el-text-color-secondary: white;

  &:deep(.el-dialog) {
    border-radius: 2vh;
    box-shadow: 0 0 10px white;
  }

  &:deep(.el-dialog__title) {
    color: white;
    font-size: 2.5vh;
    font-weight: normal;
  }

  &:deep(.el-dialog__close) {
    color: white;
    font-size: 2.5vh;
  }

  .warehousing-selector {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;

    .warehousing-selector-item {
      margin-left: 2.5%;
      margin-bottom: 1%;

      .el-radio-button {
        --el-radio-button-checked-bg-color: #555;
        --el-radio-button-checked-text-color: white;
        --el-radio-button-checked-border-color: #555;
        --el-radio-button-disabled-checked-fill: gray;
      }

      &:deep(.el-radio-button__inner) {
        color: white;
        background-color: #555;
        border-color: black;
      }

      &:deep(.is-active .el-radio-button__inner) {
        color: black;
        background-color: #ddd;
      }
    }

    &:deep(.el-input__wrapper) {
      background-color: black;
    }

    &:deep(.el-input__inner) {
      color: #ccc;
    }

    &:deep(.el-select__popper.el-popper) {
      background-color: black;
    }

    &:deep(.el-select-dropdown__item) {
      color: white;
      background-color: black;
    }

    &:deep(.el-select-dropdown__item.selected) {
      color: white;
      background-color: green;
    }

    &:deep(.el-select-dropdown__item.hover) {
      color: white;
      background-color: #666;
    }
  }

  .el-table {
    --el-table-bg-color: rgba(0, 0, 0, 0.8);
    --el-table-border-color: rgb(100, 100, 100);
    --el-table-row-hover-bg-color: rgb(50, 50, 50);
    --el-table-tr-bg-color: rgba(0, 0, 0, 0.8);
    --el-table-text-color: white;
  }

  &:deep(.el-table__empty-block) {
    background-color: rgba(0, 0, 0, 0.8);
  }

  &:deep(.el-table--large .cell) {
    padding: 0 5px;
  }
}
</style>